<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" th:href="@{/element-ui/index.css}" />

    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      .content-wrap {
        background: url("/img/bg.jpg") no-repeat;
        background-size: 100% 100%;
        height: 100vh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .box {
        width: 400px;
        text-align: center;
        background: #fff;
        padding: 30px;
      }
      h2 {
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript" th:src="@{/axios/axios.min.js}"></script>
    <script type="text/javascript" th:src="@{/vue/vue.min.js}"></script>
    <script type="text/javascript" th:src="@{/vue/jsencrypt.min.js}"></script>
    <script type="text/javascript" th:src="@{/vue/js.cookie.min.js}"></script>
    <script type="text/javascript" th:src="@{/element-ui/index.js}"></script>
    <div id="app">
      <div class="content-wrap">
        <div class="box">
          <h2>用户登录</h2>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left" class="login-form">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="form.code" auto-complete="off" style="width: 63%" @keyup.enter.native="onSubmit">
                <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
              </el-input>
              <div class="login-code">
                <img :src="codeUrl" @click="getCode">
              </div>
            </el-form-item>
          </el-form>
          <el-button>重置</el-button>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </div>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          codeUrl: '',
          form: {
            username: "",
            password: "",
            code: "",
            uuid: ''
          },
         publicKey: 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n' +
                  '2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgkCAwEAAQ==',
          rules: {
            username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
            ],
            code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
          },
        };
      },
      created() {
        // 获取验证码
        this.getCode()
      },
      methods: {
         encrypt(txt) {
          const encryptor = new JSEncrypt()
          encryptor.setPublicKey(this.publicKey) // 设置公钥
          return encryptor.encrypt(txt) // 对需要加密的数据进行加密
        },
        getCode() {
          axios.get("/code").then(res => {
            const data = res.data
            this.codeUrl = data.img
            this.form.uuid = data.uuid
          })
        },
        onSubmit() {
          this.$refs.form.validate(async (valid) => {
            if (valid) {
              const params = {
                username: this.form.username,
                password: this.encrypt(this.form.password),
                code: this.form.code,
                uuid: this.form.uuid,
              };
              axios.post("/doLogin", params).then((res) => {
                const data = res.data
                if(data && data.username) {
                  Cookies.set('SUSAN-TOEKN', data.token, { expires: 1 })
                  window.location.href="/productList";
               } else {
                 this.$message.error(data.message);
               }
              });
            }
          });
        },
      },
    });
  </script>
  <style rel="stylesheet/scss" lang="scss">

    .login-form {
      border-radius: 6px;
      background: #ffffff;
      width: 375px;
      padding: 25px 25px 5px 25px;
    .el-input {
      height: 38px;
    input {
      height: 38px;
    }
    }
    .input-icon{
      height: 39px; width: 14px; margin-left: 2px;
     }
    }
    .login-code {
      width: 33%;
      display: inline-block;
      height: 38px;
      float: right;
    img{
      cursor: pointer;
      vertical-align:middle
     }
    }
  </style>
</html>
